<template>
  <v-ons-page>
    <v-ons-toolbar>
      <div class="left">
        <v-ons-back-button>返回</v-ons-back-button>
      </div>
      <div class="center">订单详情</div>
    </v-ons-toolbar>
    <div class="container">

      <div class="info-group">
        <!-- 头部 -->
        <div class="head">
          <div class="title">
            <div>
              <img src="../../assets/resource/consumer/order_detail/status-icon1.png" alt="">
              <strong>订单已完成</strong>
            </div>
            <div @click="chooseLocation">
              查看跑腿 >
            </div>
          </div>
          <div class="btn-group">
            <button class="again-btn">再来一单</button>
            <button>取消订单</button>
            <button>订单反馈</button>
          </div>
        </div>

        <!-- 内容 -->
        <div class="main">
          <div class="title">
            <h3>配送信息</h3>
          </div>
          <div class="detail">
            <div class="detail-item">
              <div class="side">物品信息</div>
              <div class="content">
                黄金叶 x1 ; 打火机x1 ;  可乐x1 ;
              </div>
            </div>

            <div class="detail-item">
              <div class="side">商品语音</div>
              <div class="content">
                <div class="audio">
                  <i class="fa fa-rss"></i>
                  <span>10 "</span>
                </div>
              </div>
            </div>

            <div class="detail-item">
              <div class="side">商品照片</div>
              <div class="content">
                <div class="img-wrap">
                  <img class="img" src="../../assets/resource/consumer/user/face.jpg" alt="">
                </div>
              </div>
            </div>

            <div class="detail-item">
              <div class="side">送达时间</div>
              <div class="content">
                尽快送达 <span>(17:23)</span>
              </div>
            </div>

            <div class="detail-item">
              <div class="side">起始地址</div>
              <div class="content">
                <p>凤城二路海洋大厦1001室</p>
                <p>张三(先生）13200000000</p>
              </div>
            </div>

            <div class="detail-item">
              <div class="side">收货地址</div>
              <div class="content">
                <p>东大街兴正元广场2楼12013</p>
                <p>李四(先生）15200000000</p>
              </div>
            </div>

            <div class="detail-item">
              <div class="side">配送骑手</div>
              <div class="content">
                <img src="../../assets/resource/consumer/order_detail/phone-icon.png" alt="" class="phone-icon">
                <span>张三</span>
              </div>
            </div>

          </div>
        </div>
      </div>

      <div class="info-group">
        <!-- 内容 -->
        <div class="main">
          <div class="title">
            <h3>订单信息</h3>
          </div>
          <div class="detail">
            <div class="detail-item">
              <div class="side">订单号码</div>
              <div class="content">
                1234567890
              </div>
            </div>

            <div class="detail-item">
              <div class="side">订单金额</div>
              <div class="content">
                0.00元(实付:0.00元)
              </div>
            </div>

            <div class="detail-item">
              <div class="side">订单备注</div>
              <div class="content">
                皮？
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </v-ons-page>
</template>

<script>
  export default {
    methods:{
      chooseLocation:function () {
      }
    },
    mounted:function () {
    }
  }
</script>

<style scoped lang="less">
  @import "../../assets/less/consumer/order-detail.less";
</style>
